<template>
    <!-- pages/myset/realname/index.wxml -->
    <view class="page">
        <view class="msg" v-if="userStatus == -1">审核失败！请重新填写上传~</view>
        <view class="msg" v-if="userStatus == 0">意约正在马不停蹄的为您审核，请耐心等待~</view>
        <view class="realnamebox">
            <van-cell-group class="flexbox">
                <view class="centers box">
                    <image class="icon-28 mr-8" :src="imgUrl + 'r-name.png'"></image>
                    <van-field
                        label-class="label-class"
                        input-class="label-class"
                        :value="name"
                        center
                        label="姓 名："
                        placeholder="请输入您的真实姓名"
                        :border="false"
                        use-button-slot
                        :readonly="bool"
                        @change="onChangeName"
                    ></van-field>
                </view>
                <view class="centers box">
                    <image class="icon-36" :src="imgUrl + 'r-code.png'"></image>
                    <van-field
                        label-class="label-class"
                        input-class="label-class"
                        :value="idcode"
                        center
                        label="身份证:"
                        placeholder="请输入您的证件号码"
                        :border="false"
                        type="idcard"
                        use-button-slot
                        :readonly="bool"
                        @change="onChangeCode"
                    ></van-field>
                </view>
            </van-cell-group>
        </view>

        <view class="realimg1" v-if="userStatus == 3 || userStatus == -1">
            <view class="realimg1text">为保障您的个人资产安全，请您上传手持证件照，证件正面照片和证件反面照片</view>
            <view class="realflexbox">
                <view>
                    <view class="comtext">手持证件照</view>
                    <view :class="showtext1 ? 'uploadedbtn' : 'uploadbtn'" @tap="parseEventDynamicCode($event, showtext1 ? '' : 'afterRead1')">
                        {{ showtext1 ? '已上传' : '上传' }}
                    </view>
                </view>
                <view>
                    <image class="realimg" @tap="afterRead1" :src="urlimg1"></image>
                </view>
            </view>
        </view>
        <view class="realimg2" v-if="userStatus == 3 || userStatus == -1">
            <view class="realflexbox">
                <view>
                    <view class="comtext">身份证正面</view>
                    <view :class="showtext2 ? 'uploadedbtn' : 'uploadbtn'" @tap="parseEventDynamicCode($event, showtext2 ? '' : 'afterRead2')">
                        {{ showtext2 ? '已上传' : '上传' }}
                    </view>
                </view>
                <view>
                    <image class="realimg" :src="urlimg2" @tap="afterRead2"></image>
                </view>
            </view>
        </view>
        <view class="realimg3" v-if="userStatus == 3 || userStatus == -1">
            <view class="realflexbox">
                <view>
                    <view class="comtext">身份证反面</view>
                    <view :class="showtext3 ? 'uploadedbtn' : 'uploadbtn'" @tap="parseEventDynamicCode($event, showtext3 ? '' : 'afterRead3')">
                        {{ showtext3 ? '已上传' : '上传' }}
                    </view>
                </view>
                <view>
                    <image class="realimg" :src="urlimg3" @tap="afterRead3"></image>
                </view>
            </view>
        </view>
        <view class="realtext" v-if="userStatus == 3 || userStatus == -1">
            <view>特别申明：</view>
            <view>1、审核通过后个人信息不可修改；</view>
            <view>2、平台对个人真实信息保密；</view>
            <view>3、审核时间为1-3个工作日</view>
        </view>
        <!-- 3正面身份证，4 反面身份证 ，5手持身份证 -->
        <!-- <view class="bigbox mt-40" wx:if="{{userStatus < 1}}">
    <view wx:for="{{listInfo}}" class="{{index == 0  ? 'box' : 'box1'}}">
      <view wx:if="{{item.type == 3}}">正面身份证</view>
      <view wx:if="{{item.type == 4}}">反面身份证</view>
      <view wx:if="{{item.type == 5}}">手持身份证</view>
      <image src="{{item.path}}" class="img mt-20" mode="aspectFit"></image>
    </view>
  </view> -->
        <view class="subbtn" @tap="onSubmit" v-if="userStatus == 3">提交</view>
        <view class="subbtn" @tap="onSubmit" v-if="userStatus == -1">重新审核</view>
        <!-- <view class="subbtn" wx:if="{{userStatus == 0}}">审核中</view>
  <view class="subbtn" wx:if="{{userStatus == 1}}">通过</view> -->
    </view>
</template>

<script>
// pages/myset/realname/index.js
const app = getApp(); // 引入app

const _request = require('../../../utils/request.js'); // 引入

require;
export default {
    data() {
        return {
            baseurl: app.globalData.baseurl,

            //全局baseurl路径
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            urlimg1: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/real1.png',

            urlimg2: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/real2.png',
            urlimg3: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/real3.png',
            showtext1: false,
            showtext2: false,
            showtext3: false,
            idcode: '',
            name: '',
            userStatus: 3,
            listInfo: [],
            bool: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 实名状态
        _request
            .get('/userAuthApply/getApplyStatus', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                let status = res.data.data.applyStatus;

                if (status == 1) {
                    uni.setNavigationBarTitle({
                        title: '已认证'
                    });
                    this.setData({
                        bool: true
                    });
                    this.setData({
                        name: res.data.data.realName,
                        idcode: res.data.data.cardNo,
                        userStatus: res.data.data.applyStatus,
                        listInfo: res.data.data.listInfo
                    });
                } else if (status == 0) {
                    uni.setNavigationBarTitle({
                        title: '审核中'
                    });
                    this.setData({
                        name: res.data.data.realName,
                        idcode: res.data.data.cardNo,
                        userStatus: res.data.data.applyStatus,
                        listInfo: res.data.data.listInfo
                    });
                    this.setData({
                        bool: true
                    });
                } else if (status == -1) {
                    uni.setNavigationBarTitle({
                        title: '审核失败'
                    });
                    this.setData({
                        name: res.data.data.realName,
                        idcode: res.data.data.cardNo,
                        userStatus: res.data.data.applyStatus,
                        listInfo: res.data.data.listInfo
                    }); // 3正面身份证，4 反面身份证 ，5手持身份证

                    res.data.data.listInfo.map((item) => {
                        if (item.type == 3) {
                            this.setData({
                                urlimg2: item.path,
                                showtext2: true
                            });
                        } else if (item.type == 4) {
                            this.setData({
                                urlimg3: item.path,
                                showtext3: true
                            });
                        } else if (item.type == 5) {
                            this.setData({
                                urlimg1: item.path,
                                showtext1: true
                            });
                        }
                    });
                } else if (status == 3) {
                    uni.setNavigationBarTitle({
                        title: '实名认证'
                    });
                }
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 上传证件照
        afterRead1() {
            let _this = this;

            uni.chooseImage({
                success(res) {
                    const tempFilePaths = res.tempFilePaths;
                    uni.uploadFile({
                        url: _this.baseurl + '/store-api/file/batchUpload',
                        filePath: tempFilePaths[0],
                        name: 'files',
                        header: {
                            token: uni.getStorageSync('token') || null
                        },
                        formData: {
                            file: 'file'
                        },

                        success(res) {
                            const data = JSON.parse(res.data).data[0];

                            _this.setData({
                                urlimg1: data.data,
                                showtext1: true
                            });
                        },

                        fail(error) {
                            console.log(error);
                        },

                        complete(res) {
                            console.log(res);
                        }
                    });
                }
            });
        },

        // 上传身份证正面
        afterRead2() {
            let _this = this;

            uni.chooseImage({
                success(res) {
                    const tempFilePaths = res.tempFilePaths;
                    uni.uploadFile({
                        url: _this.baseurl + '/store-api/file/batchUpload',
                        filePath: tempFilePaths[0],
                        name: 'files',
                        header: {
                            token: uni.getStorageSync('token') || null
                        },
                        formData: {
                            file: 'file'
                        },

                        success(res) {
                            const data = JSON.parse(res.data).data[0];

                            _this.setData({
                                urlimg2: data.data,
                                showtext2: true
                            });
                        },

                        fail(error) {
                            console.log(error);
                        },

                        complete(res) {
                            console.log(res);
                        }
                    });
                }
            });
        },

        // 上传身份证反面
        afterRead3() {
            let _this = this;

            uni.chooseImage({
                success(res) {
                    const tempFilePaths = res.tempFilePaths;
                    uni.uploadFile({
                        url: _this.baseurl + '/store-api/file/batchUpload',
                        filePath: tempFilePaths[0],
                        name: 'files',
                        header: {
                            token: uni.getStorageSync('token') || null
                        },
                        formData: {
                            file: 'file'
                        },

                        success(res) {
                            const data = JSON.parse(res.data).data[0];

                            _this.setData({
                                urlimg3: data.data,
                                showtext3: true
                            });
                        },

                        fail(error) {
                            console.log(error);
                        },

                        complete(res) {
                            console.log(res);
                        }
                    });
                }
            });
        },

        // 获取名字
        onChangeName(e) {
            this.setData({
                name: e.detail
            });
        },

        // 获取身份证号码
        onChangeCode(e) {
            this.setData({
                idcode: e.detail
            });
        },

        // 提交
        onSubmit() {
            if (!this.showtext1) {
                uni.showToast({
                    title: '请上传手持证件照',
                    icon: 'none',
                    duration: 2000
                });
            } else if (!this.showtext2) {
                uni.showToast({
                    title: '请上传身份证正面',
                    icon: 'none',
                    duration: 2000
                });
            } else if (!this.showtext3) {
                uni.showToast({
                    title: '请上传身份证反面',
                    icon: 'none',
                    duration: 2000
                });
            } else if (!this.idcode) {
                uni.showToast({
                    title: '身份证号码不能为空',
                    icon: 'none',
                    duration: 2000
                });
            } else if (!this.name) {
                uni.showToast({
                    title: '姓名不能为空',
                    icon: 'none',
                    duration: 2000
                });
            } else {
                this.uploading();
            }
        },

        // 上传方法
        uploading() {
            _request
                .postObj('/userAuthApply/addOrUpdate', {
                    cardFront: this.urlimg1,
                    cardNo: this.idcode,
                    cardReverse: this.urlimg3,
                    hardCard: this.urlimg2,
                    realName: this.name,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: '上传成功',
                            icon: 'none',
                            duration: 2000
                        });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 1000);
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/myset/realname/index.wxss */
page {
    background: #fbfbfb;
    position: relative;
}

.page {
    position: absolute;
    margin-bottom: 180rpx;
}

/* 输入框 */
.realnamebox {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 20rpx 20rpx 0 20rpx;
    height: 210rpx;
}

.label-class {
    font-size: 32rpx;
    width: 120rpx;
}

.flexbox {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    height: 210rpx;
}

.box {
    padding: 0 20rpx;
}

.mr-8 {
    margin-right: 8rpx;
}

/* 手持照片 */
.realimg1 {
    width: 710rpx;
    height: 342rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 20rpx 20rpx 0 20rpx;
}

.realimg1text {
    width: 672rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
    padding: 40rpx 18rpx 40rpx 20rpx;
}

.realflexbox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}

.realimg2 > .realflexbox,
.realimg3 > .realflexbox {
    height: 100%;
}

.comtext {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 44rpx;
}

.uploadbtn {
    width: 120rpx;
    height: 48rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 12px;
    text-align: center;
    color: white;
    line-height: 48rpx;
    margin-top: 20rpx;
}

.uploadedbtn {
    width: 120rpx;
    height: 48rpx;
    background: #e1e1e1;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 12px;
    text-align: center;
    color: #a8a8a8;
    line-height: 48rpx;
    margin-top: 20rpx;
}

/* 正面照片 */

.realimg2 {
    width: 710rpx;
    height: 212rpx;
    background: #ffffff;
    box-shadow: 2px 2px 4px 2px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 20rpx 20rpx 0 20rpx;
}

/* 反面照片 */
.realimg3 {
    width: 710rpx;
    height: 212rpx;
    background: #ffffff;
    box-shadow: 2px 2px 4px 2px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 20rpx 20rpx 0 20rpx;
}

.realimg {
    width: 236rpx;
    height: 152rpx;
}

/* 提示文字 */
.realtext {
    width: 672rpx;
    height: 160rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    margin: 10rpx 40rpx 0 38rpx;
}

/* 按钮 */
.subbtn {
    width: 710rpx;
    height: 84rpx;
    background: #ff8722;
    border-radius: 21px;
    margin: 0 20rpx;
    text-align: center;
    color: white;
    line-height: 84rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 80rpx;
}

/**/
.q-image-wrap {
    width: 150rpx;
    height: 150rpx;
    border: 3px solid #f0f0f0;
    float: left;
    margin-right: 20rpx;
    position: relative;
    overflow: hidden;
}

.q-image-remover {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100%;
    background: #2e82ff;
    position: absolute;
    top: -50rpx;
    right: -50rpx;
}

.q-image-remover icon {
    position: absolute;
    left: 12rpx;
    bottom: 12rpx;
    color: #fff;
}

.uploadImgBtn {
    width: 150rpx;
    height: 150rpx;
    text-align: center;
    line-height: 140rpx;
    border: 6rpx solid #f0f0f0;
    float: left;
}

.uploadImgBtn icon {
    font-size: 80rpx;
    color: #999;
}

/* 图片展示 */
.img {
    height: 200rpx;
}

.box > view {
    width: 100%;
    text-align: center;
}

.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.box1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 50%;
}

.bigbox {
    display: flex;
    flex-wrap: wrap;
}

.msg {
    width: 100%;
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff1b0b;
    line-height: 34rpx;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
}
</style>
